<template>
    <div class="comment_reply">
        <div class="comment_lis clearFix">
            <div class="avatar">
                <el-avatar :size="35" src="@a/img/headportrait03.jpg" @error="errorHandler">
                    <img src="@a/img/headportrait03.jpg"/>
                </el-avatar>
            </div>
            <div  class="comment_content">
                <div class="direct_line">
                    <p class="comment_name">
                        <el-button type="text">崔浩月：</el-button>
                        <span>
                        还行吧!
                    </span>
                    </p>
                    <p class="comment_img" v-if="false">
                        <el-image :src="srcList[2]" :preview-src-list="srcList" fit="fill">
                            <div slot="placeholder" class="image-slot">
                                加载中<span class="dot">...</span>
                            </div>
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </p>
                    <p class="comment_date">
                        <span class="time">2020-4-20</span>
                        <span class="hour">12:51</span>
                        <el-button type="text">删除</el-button>
                        <el-button type="text">回复</el-button>
                    </p>
                </div>
                <div v-if="false" class="comment_lis clearFix">
                    <div class="avatar">
                        <el-avatar :size="35" src="@a/img/headportrait03.jpg" @error="errorHandler">
                            <img src="@a/img/headportrait03.jpg"/>
                        </el-avatar>
                    </div>
                    <div class="comment_content">
                        <div>
                            <p class="comment_name">
                                <el-button type="text">李云</el-button>
                                <span>
                                    回复
                                </span>
                                <el-button type="text">崔浩月：</el-button>

                                <span>
                                    还行吧!
                                </span>
                            </p>
                            <p class="comment_img" v-if="false">
                                <el-image :src="srcList[2]" :preview-src-list="srcList" fit="fill">
                                    <div slot="placeholder" class="image-slot">
                                        加载中<span class="dot">...</span>
                                    </div>
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                            </p>
                            <p class="comment_date">
                                <span class="time">2020-4-20</span>
                                <span class="hour">12:51</span>
                                <el-button type="text">删除</el-button>
                                <el-button type="text">回复</el-button>
                            </p>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="more">
            <p v-if="loadingShow">
                <i class="el-icon-loading"></i>
                <span>加载中...</span>
            </p>
            <el-button v-if="!loadingShow" @click="loadingShow = !loadingShow" type="text">查看更多</el-button>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                srcList:[
                    require('../../assets/img/headportrait01.jpg'),
                    require('../../assets/img/headportrait02.jpg'),
                    require('../../assets/img/headportrait03.jpg')
                ],
                loadingShow:false
            }
        },
        methods:{
            errorHandler(){
                return true;
            }
        }
    }
</script>

<style lang="scss" scoped>
.comment_reply{
    .comment_lis{
      .avatar{
          float: left;
      }
      .comment_content{
          float: left;
          margin-left: 20px;
          p{
              margin-block-start: 0;
              margin-block-end: 0;
          }
          p.comment_img{
              width: 212px;
          }
          .comment_name>span{
              font-size: 14px;
              font-weight: 500;
              color: #303133;
          }
          .comment_date{
              color: #909399;
              font-size: 12px;
              .hour{
                  margin-left: 10px;
                  margin-right: 15px;
              }
          }
      }
    }
    .more{
        box-sizing: border-box;
        padding: 10px 0;
        text-align: center;
        font-size: 12px;
        color: #409EFF;
        i{
            font-size: 16px;
        }
        span{
            margin-left: 5px;
        }
    }
}
.clearFix::after{
        content: "";
        display: block;
        width: 100%;
        font-size: 0;
        clear: both;
    }
</style>